<!DOCTYPE html> 
<html> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta id="viewport" name="viewport"
		content="width=auto; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>jqmdp demo page</title> 

	<link rel="stylesheet" href="../../../js/jqm/jquery.mobile-1.0.css" />

	<script src="../../../js/jquery-1.6.4.js"></script>

	<script src="../../../js/jquery.mobile.jqmdp-1.0b2.js"></script>
	<script src="../../../js/jqm/jquery.mobile-1.0.js"></script>

	<script>
		$.jqmdp.debug(true);
	</script>
</head>

<body>
	<div data-role="page" id="main" data-theme="e" >
		<div data-role="header" >
			<h3>jqmdp tests</h3>
			<a href="index.html" data-ajax="false" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<h3>JQM Dynamic Page plugin</h3>
			自分のテスト用に書いたコードです。解説はありません。
			<a data-role="button" href="#test1">Replace test</a>
			<a data-role="button" href="#test2">Nested scope test</a>
			<a data-role="button" href="#test3">Dynamic list test</a>
			<a data-role="button" href="#test4">Control sentence test</a>
			<a data-role="button" href="#test5">refresh</a>
		</div>
	</div>
	

	<div data-role="page" id="test1" data-theme="e" data-dp-scope="(test1_data[0])">
		<div data-role="header" >
			<h3>test1</h3>
			<a href="#main" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<h3>Replace test</h3>
			<div>
				<div>data-dp-text:<span data-dp-text="(a)"></span></div>
				<div>data-dp-html:<span data-dp-html="(b)"></span></div>
				<div>data-dp-src:<img data-dp-src="(c)"></span></div>
				<div>data-dp-href:<a data-dp-href="(d)" data-dp-text="(d)" ></a></div>
				<div>data-dp-value:<input data-dp-value="(e)" /></div>
				<div>data-dp-show:<span data-dp-show="(f)" />SHOW/HIDE</div>
				<br/>
				<a data-role="button" href="#" onclick="test1_1(this)">change</a>
				<script>
					var test1_data = [{
						next: 1,
						a : "<text>",
						b : "<font color=red>red</font>",
						c : "../../images/face-0.png",
						d : "http://google.com",
						e : "te<>xt",
						f : true
					},{
						next: 0,
						a : "xxxxxxxxx",
						b : "<font color=blue>blue</font>",
						c : "../../images/face-4.png",
						d : "http://yahoo.com",
						e : "xxxxxxxxx",
						f : false
					}];
					function test1_1(elem) {
						var next = $(elem).scope().next;
						$.scope(elem,null,test1_data[next]);
						$(elem).jqmdp().refresh();
					}
				</script>
			</div>
		</div>
	</div>
		
	<div data-role="page" id="test2" data-theme="e" 
		data-dp-scope="({a:'page-scope'})">
		<div data-role="header" >
			<h3>test2</h3>
			<a href="#main" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<h3>Nested scope test</h3>
			<div>pege-before:a=<span data-dp-text="(a)"></span></div>
			<div data-dp-scope="({a:'nest1-scope',b:1,c:1})">
				<div>_nest1-before:
					a=<span data-dp-text="(a)"></span>,
					b=<span data-dp-text="(b)"></span>,
					c=<span data-dp-text="(c)"></span>
				</div>
				<div data-dp-scope="({a:'nest2-scope',b:2})">
					<div>__nest2-before:
						a=<span data-dp-text="(a)"></span>,
						b=<span data-dp-text="(b)"></span>,
						c=<span data-dp-text="(c)"></span>
					</div>
					<div data-dp-scope="({a:'nest3-scope',c:3})">
						<div>___nest3:
							a=<span data-dp-text="(a)"></span>,
							b=<span data-dp-text="(b)"></span>,
							c=<span data-dp-text="(c)"></span>
						</div>
					</div>
					<div>__nest2-after:a=<span data-dp-text="(a)"></span></div>
				</div>
				<div>_next1-after:a=<span data-dp-text="(a)"></span></div>
			</div>
			<div>pege-after:a=<span data-dp-text="(a)"></span></div>

			
			<hr/>
			<div data-dp-id="level-1" data-dp-scope="({lvl:'1'})"
					data-dp-args="(setMap($this,'leve3-1'))">
				<div data-dp-id="level-2-1" data-dp-scope="({lvl:'2-1'})"
					data-dp-args="(setMap($this,'level-2-2'),setMap($this,'level-2-1','self-'),setMap($this,'level-3-2'))"
					>
					<div data-dp-id="level-3-1" data-dp-scope="({lvl:'3-1'})">
						<div>
							<span data-dp-args="(setMap($this,'level-1'))"></span>
						</div>
						<div>
							<span data-dp-args="(setMap($this,'level-2-1'))"></span>
						</div>
						<div>
							<span data-dp-args="(setMap($this,'level-2-2'))"></span>
						</div>
						<div>
							<span data-dp-args="(setMap($this,'level-3-1'))"></span>
						</div>
						<div>
							<span data-dp-args="(setMap($this,'level-3-2'))"></span>
						</div>
					</div>
					<div data-dp-id="level-3-2"  data-dp-scope="({lvl:'3-2'})"
							data-dp-args="(setMap($this,'level-3-2','self-'))" >
					</div>
				</div>
				<div data-dp-id="level-2-2" data-dp-scope="({lvl:'2-2'})">
					<div data-dp-id="level-3-1a"  data-dp-scope="({lvl:'3-1a'})">
						<div>
							<span data-dp-args="(setMap($this,'level-3-1'))"></span>
							<span data-dp-args="(setMap($this,'level-3-2'))"></span>
						</div>
					</div>
					<div data-dp-id="level-3-2a"  data-dp-scope="({lvl:'3-2a'})"
							data-dp-args="(setMap($this,'level-3-2'),setMap($this,'level-2-1'))" >
					</div>
					<div data-dp-id="level-3-1"  data-dp-scope="({lvl:'3-1 in 2-2'})"
							data-dp-args="(setMap($this,'level-3-2'),setMap($this,'level-3-1','self-'))" >
					</div>
				</div>
			</div>

			<script>
				var testMap = {};
				function setMap($this, id, me) {
					me = ((me == null) ? "level-" : me)+$this.scope().lvl;
					var key = id +" in "+me
					var $tgt = $this.jqmdp(id);
					console.log("tgt="+$tgt);
					var val = ($tgt) ? $tgt.attr('data-dp-id') : "null";
					testMap[key] = val;
				}
			</script>

			<div data-dp-scope="({k:0})">
				<div data-dp-for="(var k in testMap)">
					<div><span data-dp-text="(k)"></span>=<span data-dp-text="(testMap[k])"></span></div>
				</div>
			</div>



		</div>
	</div>
	
	
	<div data-role="page" id="test3" data-theme="e" 
		data-dp-scope="({a:'page-scope'})">
		<div data-role="header" >
			<h3>test3</h3>
			<a href="#main" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<h3>Dynamic list test</h3>
			<div data-dp-scope="({list:{a:'init-data',b:2,c:9,d:3},key:0})">
				<div>Properties list：</div>
				<a data-role="button" data-inline="true" href="#" onclick="changeList(this, location)">location</a>
				<a data-role="button" data-inline="true" href="#" onclick="changeList(this, $.jqmdp)">$.jqmdp</a>
				<a data-role="button" data-inline="true" href="#" onclick="changeList(this, $.mobile)">$.mobile</a>
				<br/><hr/><br/>
				
				<ul data-role="listview" data-dp-for="(key in list)" data-inset="true">
					<li><span data-dp-text="(key)"></span>=<span data-dp-text="(list[key])"></span></li>
				</ul>
				<script>
					function changeList(elem, data) {
						$(elem).scope(null,{list:data,key:0});
						$(elem).jqmdp().refresh();
					}
				</script>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="test4" data-theme="e" >
		<div data-role="header" >
			<h3>test4</h3>
			<a href="#main" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" data-dp-scope="({w:2, h:2})">
			<h3>Control sentence test</h3>

			<a data-role="button" href="#" data-icon="arrow-u" data-iconpos="notext" data-inline="true" 
				onclick="$.jqmdp(this).refresh(400);$.scope(this).h--"></a>
			<a data-role="button" href="#" data-icon="arrow-d" data-iconpos="notext" data-inline="true" 
				onclick="$(this).scope().h++;$(this).jqmdp().refresh(400)"></a>
			<a data-role="button" href="#" data-icon="arrow-l" data-iconpos="notext" data-inline="true" 
				onclick="$.scope($(this)).w--;$.jqmdp.refresh($(this),400);"></a>
			<a data-role="button" href="#" data-icon="arrow-r" data-iconpos="notext" data-inline="true" 
				onclick="$(this).scope().w++;$.jqmdp.refresh(this, 400)"></a>

			<table border=1 cellspacing=0 data-dp-scope="({y:0,x:0})" >
				<tbody data-dp-for="(y=0; y<h; y++)">
					<tr data-dp-for="(x=0; x<w; x++)">
						<td>
							<span data-dp-text="(x+','+y)"></span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div data-role="page" id="test5" data-theme="e" >
		<div data-role="header" >
			<h3>test5</h3>
			<a href="#main" data-icon="home" data-role="button" data-iconpos="notext"></a>
		</div>
		<div data-role="content" data-dp-scope="({w:2, h:2})">
			<h3>Control sentence test</h3>


			<div data-dp-scope="({y:0,x:0})" >
				<div data-dp-for="(y=0; y<h; y++)" >
					<ul data-role="listview" data-inset="true"
						data-dp-for="(x=0; x<w; x++)" >
						<li>
							<a data-dp-text="(x+','+y)"></a>
						</li>
					</ul>
				</div>
			</div>
			<hr/>
			<div data-dp-scope="({y:0,x:0})" >
					<ul data-role="listview" data-inset="true"
						data-dp-for="(x=0; x<3; x++)" >
						<li>
							<a data-dp-text="(x+','+y)"></a>
						</li>
					</ul>
			</div>
			<hr/>
			<div data-dp-scope="({y:0,x:0})" >
					<select 
						data-dp-for="(x=0; x<3; x++)" >
						<option data-dp-text="(x+','+y)"></option>
					</ul>
			</div>
		</div>
	</div>
</body>
</html>